<template>
	<view>
		<view class="head">
			<view class="checkWeek">
				<img src="http://1.14.247.152:9797/images/19693n2.png" class="zuoCss" v-show="selectWeek > 1"
					@click="weekCut"></img>
				<picker @change="confirmWeek" :value="0" :range="list">
					<button class="title" @click="showSwitchWeek = true">
						<view class="showWeek">第{{selectWeek}}周</view>
						<view class="weekText" v-if="currentWeek == selectWeek">(本周)</view>
					</button>
				</picker>
				<img src="http://1.14.247.152:9797/images/11940n.png" @click="weekPut" v-if="selectWeek < 20"
					class="youCss"></img>

				<!-- 占位置，防止偏移 -->
				<view v-if="selectWeek >= 20" class="youCss">
				</view>
			</view>
		</view>
		<Timetable :timetables="timetablesArray" :timetableType="timetableType" :xingqiColor="xingqiColor"
			:currentWeek="currentWeek" :selectWeek="selectWeek" @getCourseData="getCourseData"></Timetable>
	</view>
</template>

<script>
	import Timetable from '../../../components/lpx-timetable/lpx-timetable'

	export default {
		data() {
			return {
				loadPa: 0, //定时器确认是否爬完id
				successPa: false,
				selectWeek: 1,
				currentWeek: 1,
				// currentXingqi: 0,
				showSwitchWeek: false,
				list: ['1', '2', '3', '4', '5',
					'6', '7', '8', '9', '10',
					'11', '12', '13', '14', '15',
					'16', '17', '18', '19', '20'
				],
				show: false,
				xingqiColor: false,
				//添加课表
				addCourseForm: {
					name: '',
					teacher: '',
					classRoom: '',
					section: '',
					xingqi: '',
					week: []
				},
				showSaveCourse: false,
				saveCourseSelect: false,
				sectionsSelect: ['1-2节', '3-4节', '5', '6-7节', '8-9节', '10-12节'],
				selectSectionText: '(单选)',
				saveCourseWeek: false,
				weekSelect: [{
						value: '1',
						label: '第1周',
						extra: '1'
					}, {
						value: '2',
						label: '第2周',
						extra: '2'
					}, {
						value: '3',
						label: '第3周',
						extra: '3'
					},
					{
						value: '4',
						label: '第4周',
						extra: '4'
					}, {
						value: '5',
						label: '第5周',
						extra: '5'
					}, {
						value: '6',
						label: '第6周',
						extra: '6'
					},
					{
						value: '7',
						label: '第7周',
						extra: '7'
					}, {
						value: '8',
						label: '第8周',
						extra: '8'
					}, {
						value: '9',
						label: '第9周',
						extra: '9'
					},
					{
						value: '10',
						label: '第10周',
						extra: '10'
					}, {
						value: '11',
						label: '第11周',
						extra: '11'
					}, {
						value: '12',
						label: '第12周',
						extra: '12'
					},
					{
						value: '13',
						label: '第13周',
						extra: '13'
					}, {
						value: '14',
						label: '第14周',
						extra: '14'
					}, {
						value: '15',
						label: '第15周',
						extra: '15'
					},
					{
						value: '16',
						label: '第16周',
						extra: '16'
					}, {
						value: '17',
						label: '第17周',
						extra: '17'
					}, {
						value: '18',
						label: '第18周',
						extra: '18'
					},
					{
						value: '19',
						label: '第19周',
						extra: '19'
					}, {
						value: '20',
						label: '第20周',
						extra: '20'
					}
				],
				xingqiSelect: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
				weekSelectDefault: [],
				sectionSelectDefault: [],
				xingqiSelectDefault: [],
				timetablesArray: []
			}
		},
		props: ['himAuthority', 'timetableType', 'timetables'],
		components: {
			Timetable
		},
		async created(option) {
			let vm = this
			vm.loadPage();
			console.log(this.timetables, 1111)
		},
		watch: {
			timetables: {
				handler(newValue,oldValue) {
					
					console.log(this.loadPa);
					this.timetablesArray = newValue;
					console.log(this.timetablesArray,1111);
				},
				deep: true,
				immediate:true
			}
		},
		computed: {
			currentXingqi() {
				let xingqi = "7123456".charAt(new Date().getDay());
				return xingqi
			}
		},
		methods: {
			async loadPage() {
				let vm = this
				let res = await getApp().UniRequest("/week", "Get", "", "");

				//当前拿到的周还是19，先注释掉
				vm.selectWeek = res.data.week;
				vm.currentWeek = res.data.week;
				// vm.selectWeek = 1
				// vm.currentWeek = 1
				vm.getCourseData()
			},
			async getCourseData() {
				let vm = this
				if (vm.selectWeek == vm.currentWeek) {
					vm.xingqiColor = true
				} else {
					vm.xingqiColor = false
				}

				let body = new Object();
				body.week = vm.selectWeek;
				console.log('week', body.week)
				this.$emit('getCourseData', body)
			},
			async weekPut() {
				this.selectWeek++;
				this.getCourseData()
			},
			async weekCut() {
				this.selectWeek--;
				this.getCourseData()
			},
			confirmWeek(res) {
				this.selectWeek = parseInt(res.detail.value) + 1
				this.getCourseData()
			},
		}
	}
</script>
<style lang="less" scoped>
	@color: #86f0be;
	@color_disabled: #f1f1f1;
	@color_standard: #333;
	@color_border: #f5f5f5;

	.head {
		display: flex;
		align-items: center;
		height: 100rpx;
		justify-content: center;
		position: relative;
		border-bottom: 1rpx solid @color_border;
		color: @color_standard;
		background-color: #f5f7fa;

		.left {
			margin-left: 20rpx;
		}

		.right {
			// margin-right: 20rpx;
			// display: flex;
			position: absolute;
			right: 20rpx;
		}

		.checkWeek {
			width: 300rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			.zuoCss {
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				margin-right: 10rpx;
			}

			.youCss {
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;

				.showWeek {}

				.weekText {
					font-size: 23rpx;
				}
			}
		}


	}
</style>
